﻿<!--
  An option page for configuring notifications.

  Copyright 2010 the Chromium Authors

  Use of this source code is governed by a BSD-style license that can be found
  in the "LICENSE" file.

  Brian Kennish <bkennish@chromium.org>
-->
<title>Notification Demo</title>
<style>
  /* Clone the look and feel of "chrome://" pages. */
  body {
    margin: 10px;
    font: 84% Arial, sans-serif
  }

  h1 { font-size: 156% }

  h1 img {
    margin: 1px 5px 0 1px;
    vertical-align: middle
  }

  h2 {
    border-top: 1px solid #9cc2ef;
    background-color: #ebeff9;
    padding: 3px 5px;
    font-size: 100%
  }
</style>
<script>
    /*
    Grays out or [whatever the opposite of graying out is called] the option
    field.
    */
    function ghost(isDeactivated) {
        options.style.color = isDeactivated ? 'graytext' : 'black';
        // The label color.
        options.frequency.disabled = isDeactivated; // The control manipulability.
    }

    onload = function () {
        // Initialize the option controls.
        options.isActivated.checked = JSON.parse(localStorage.isActivated);
        // The display activation.
        options.frequency.value = localStorage.frequency;
        // The display frequency, in minutes.

        if (!options.isActivated.checked) { ghost(true); }

        // Set the display activation and frequency.
        options.isActivated.onchange = function () {
            localStorage.isActivated = options.isActivated.checked;
            ghost(!options.isActivated.checked);
        };
        options.frequency.onchange = function () {
            localStorage.frequency = options.frequency.value;
        };
    };
</script>
<h1>
    <img src="64.png" alt="Toast">
    Notification Demo
</h1>
<h2>
    Options</h2>
<form id="options">
<input type="checkbox" name="isActivated" checked>
Display a notification every
<select name="frequency">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>10</option>
    <option>15</option>
    <option>20</option>
    <option>25</option>
    <option>30</option>
</select>
minute(s).
</form>
